<template>
	<view class="pageContent">
		<view class="headContent">
			<view class="memberType" @click="selectHead(index)" :class="index==headIndex ? 'select' : ''"
				v-for="(item,index) in headList" :key="index">
				{{item.name}}<text v-if="item.allCount">({{item.allCount}})</text>
			</view>
		</view>
		<view v-if="appoList.length && isComplete">
			<view class="houseMain" v-for="(item,index) in appoList" :key="index">
				<view class="houseTil">
					<view>房屋信息</view>
					<view class="houseTilTim">{{item.time || '入住日期'}}</view>
				</view>
				<view class="houseNo">
					<view>{{item.roomInfo+'-'+item.roomName}}</view>
					<view class="houseMes">
						<view class="houseMesIt">{{item.name}}</view>
						<view class="houseMesIt" v-if="item.telephone">{{item.telephone}}</view>
					</view>
				</view>
				<view class="handler">
					<!-- <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view> -->
					<block v-if="headIndex==0">
						<block v-if="userMsg.roleId==17">
							<view class="handlerCha handlerRed" @click.stop="approvaPut(index)">撤回</view>
							<view class="handlerCha handlerGre" @click.stop="makePhone(index)">拨打电话</view>
							<view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">详情</view>
						</block>
						<block v-else>
							<view class="handlerCha handlerBlu" @click.stop="appMem(index)">去审批</view>
						</block>
					</block>
					<block v-if="headIndex==1 || headIndex==2">
						<view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view>
					</block>
				</view>
			</view>
		</view>

		<view class="appEmp" v-if="!appoList.length && isComplete">
			<image class="appEmpIcon" :src="images +'/appEmpty.png'" mode="widthFix"></image>
			<view class="appEmpMsg">～还没有足迹～</view>
		</view>

	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				password: '',
				headList: [{
						value: 1,
						name: '待审批',
						allCount: 0
					},
					{
						value: 2,
						name: '已同意',
						allCount: 0
					},
					{
						value: 3,
						name: '已拒绝',
						allCount: 0
					},
				],
				headIndex: -1,
				formData: {
					name: "",
					date: "",
					housename: "房屋1",
				},
				date: '',
				appoList: [],
				isComplete: false,
				type: '',
				userMsg: '',
			}
		},

		onLoad(options) {
			var index = options.index ? options.index : 0;
			var type = options.type ? options.type : 0;
			this.headIndex = index;
			this.type = type;

			var userMsg = wx.getStorageSync('userMsg');
			this.userMsg = userMsg;
			//17租客，16业主
			var title = userMsg.roleId == 17 ? '我的申请' : '由我审批'
			wx.setNavigationBarTitle({
				title: title
			})
			setTimeout(() => {
				this.isComplete = true
			}, 300)
		},

		onShow() {
			var room = wx.getStorageSync('room');
			if (room) {
				this.room = room;
				this.approvalList();
			}
		},

		methods: {
			appMem(index, type = 0) {
				var id = this.appoList[index].roomApplyId
				wx.navigateTo({
					url: '/pagesA/index/appMem?id=' + id + '&type=' + type
				})
			},
			detailMem(index, type = 0) {
				var id = this.appoList[index].roomApplyId
				wx.navigateTo({
					url: '/pagesA/index/detailMem?id=' + id + '&type=' + type
				})
			},

			makePhone(index) {
				var phoneNumber = this.appoList[index].ownerTelephone
				wx.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},

			async approvalList() {
				var url = '/UserServer/owner/info/approvalList'
				var room = this.room
				var params = {
					roomId: room.roomId,
					ownerId: room.ownerId,
					projectId: room.projectId,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options);
				var awaiteFilter = this.listFilter(param.awaiteFilter, 0);
				var approveFilter = this.listFilter(param.approveFilter, 1);
				var refuseFilter = this.listFilter(param.refuseFilter, 2);
				//根据选择展示对应的列表
				if (this.headIndex == 0) {
					this.appoList = awaiteFilter;
				}
				if (this.headIndex == 1) {
					this.appoList = approveFilter;
				}
				if (this.headIndex == 2) {
					this.appoList = refuseFilter;
				}
			},

			//根据角色过滤展示审批列表
			listFilter(arrayFilter, index) {
				var room = this.room
				var userMsg = this.userMsg;
				//租客:过滤展示租客自己申请的审批列表
				if (userMsg.roleId == 17) {
					var arrayFilter = arrayFilter.filter((item) => {
						return item.applyId == room.ownerId;
					})
				}
				//业主:过滤展示不是自己申请的审批列表
				if (userMsg.roleId == 16) {
					var arrayFilter = arrayFilter.filter((item) => {
						return item.applyId != room.ownerId;
					})
				}
				//当前列表的数量
				this.headList[index].allCount = arrayFilter.length;
				//格式化时间
				arrayFilter.map((value) => {
					value['time'] = util.getTime(value.applyTime);
					return value;
				})
				return arrayFilter;
			},

			async approvaPut(index) {
				var url = '/UserServer/owner/info/approva?'
				var item = this.appoList[index]
				//result:租客撤回传0,业主：同意传1，拒绝传2.
				var params = {
					roomApplyId: item.roomApplyId,
					processResult: 0,
				}
				var paramUrl = util.stringifyQs(params);
				url = url + paramUrl
				var options = {
					url,
					params: {},
					method: 'PUT'
				}
				var param = await util.requestPro(options);
				wx.showToast({
					title: "撤回成功",
					icon: 'none'
				});
				this.approvalList();
			},

			choose(e) {
				console.log('choose', e)
				this.date = e.detail.value
				this.formData.date = e.detail.value
			},

			selectHead(index) {
				this.headIndex = index;
				this.approvalList();
			},

		},

	}
</script>

<style scoped>
	.pageContent {
		height: 100vh;
		background: #F3F6F9;
		padding: 110rpx 0rpx 0rpx 0rpx;
	}

	/* 头部tab切换 */
	.headContent {
		position: fixed;
		width: 750rpx;
		top: 0rpx;
		left: 0rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		z-index: 999;
		padding: 0rpx 30rpx 0rpx 30rpx;
	}

	.memberType {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 6rpx;
		font-size: 32rpx;
		text-align: center;
	}

	.memberType.select {
		color: #1086FF;
		font-weight: 600;
	}

	.memberType:nth-child(n+2) {}

	.houseMain {
		background: #FFFFFF;
		padding: 0rpx 14rpx 0rpx 14rpx;
		margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.houseTil {
		display: flex;
		justify-content: space-between;
		padding: 14rpx 14rpx 14rpx 14rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseTilTim {
		color: #666666;
	}

	.houseNo {
		padding: 14rpx 14rpx 14rpx 14rpx;
		font-size: 30rpx;
		color: #030303;
		border-bottom: 0.3rpx solid #E7E7E7;
	}

	.houseMes {
		display: flex;
		padding: 14rpx 0rpx 14rpx 0rpx;
	}

	.houseMesIt {
		line-height: 36rpx;
		background: #F2F8FF;
		border-radius: 6rpx;
		border: 1px solid #BCDEFF;
		color: #519AEE;
		font-size: 24rpx;
		margin-right: 10rpx;
		padding: 0rpx 14rpx 0rpx 14rpx;
	}

	.handler {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx 14rpx 20rpx 14rpx;
		width: 100%;
	}

	.handlerCha {
		height: 60rpx;
		width: 160rpx;
		line-height: 60rpx;
		background: #DDDDDD;
		border-radius: 30rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
	}

	.handlerBlu {
		background: #1086FF;
		margin-left: 18rpx;
	}

	.handlerGre {
		background: #05C15F;
		margin-left: 18rpx;
	}

	.handlerRed {
		background: #FF635D;
		margin-left: 18rpx;
	}

	.btOne {
		margin: 40rpx 0rpx 0rpx 0rpx;
	}

	.appEmp {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: #fff;
		margin: -110rpx 0rpx 0rpx 0rpx;
		padding: 210rpx 0rpx 0rpx 0rpx;
	}

	.appEmpIcon {
		width: 670rpx;
		height: 730rpx;
	}

	.appEmpMsg {
		color: #A8AFB6;
		font-size: 36rpx;
		margin: -183rpx 0rpx 0rpx 0rpx;
	}
</style>
